<template>
	<div class="login-container" @keyup.enter.native="handleLogin">
		<top-color v-show="false"></top-color>
		<div class="login-weaper animated bounceInDown">
			<div class="login-left">
				<div class="login-time">
					{{time}}
				</div>
				<img class="img" src="https://cloudadmin.ebyte.com/uploads/0.png" alt="">
				<p class="title">{{ $t('login.info') }}</p>
			</div>
			<div class="login-border">
				<div class="login-main">
					<h4 class="login-title">
						{{ $t('login.title') }}<!-- {{website.title}} -->
						<top-lang></top-lang>
					</h4>
					<userLogin v-if="activeName==='login'"></userLogin>
					<register v-else-if="activeName==='register'"></register>
					<div class="login-menu">
						<a href="#" @click.stop="activeName='login'">{{ $t('login.title') }}</a>
						<a href="#" @click.stop="activeName='register'">{{ $t('login.register') }}</a>					
					</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script>
	import userLogin from "./userlogin";
	import register from "./register";
	import {
		setToken,
		removeToken
	} from '@/util/auth'
	import {
		mapGetters
	} from "vuex";
	import {
		dateFormat
	} from "@/util/date";
	import {
		validatenull
	} from "@/util/validate";
	import topLang from "@/page/index/top/top-lang";
	import topColor from "@/page/index/top/top-color";
	import request from "@/router/axios";
	import {
		setStore,
		getStore
	} from '@/util/store';

	export default {
		name: "login",
		components: {
			userLogin,
			register,
			topLang,
			topColor
		},
		data() {
			return {
				time: "",
				activeName: "login"
			};
		},
		watch: {
			$route() {
				const params = this.$route.query;
				this.socialForm.state = params.state;
				this.socialForm.code = params.code;

				if (!validatenull(this.socialForm.state)) {
					const loading = this.$loading({
						lock: true,
						text: `${
            this.socialForm.state === "WX" ? "微信" : "QQ"
            }登录中,请稍后。。。`,
						spinner: "el-icon-loading"
					});
					setTimeout(() => {
						loading.close();
					}, 2000);
				}
			}
		},
		created() {
			const params = this.$route.query;
			let that = this;
			if (params.token) {
				setToken(params.token)
				setStore({
					name: 'token',
					content: params.token
				})
				this.$router.push('/src/wel/index');
				return;
			}
			this.getTime();
			setInterval(() => {
				this.getTime();
			}, 1000);
		},
		mounted() {},
		computed: {
			...mapGetters(["website", "tagWel"]),
		},
		props: [],
		methods: {
			getTime() {
				this.time = dateFormat(new Date());
			}
		}
	};
</script>

<style lang="scss">
	@import "@/styles/login.scss";
</style>
